<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能表单</title>
</head>
<body>


      <!-- 
    form表单标签：用于包裹表单元素，收集用户输入并提交
    1.action属性：提交数据到后端接口的地址，# 表示暂不实际提交（仅演示）
    2.method属性：数据提交方式，GET 会把数据拼在地址栏（适合简单/非敏感数据）
  -->
  <form action="#" method="GET" >
    <!-- 
      input[type="text"]：普通文本输入框
      placeholder：输入提示文字，引导用户填写
      name：表单数据的键名，后端通过 username 接收值 
      maxlength:最大输入字符长度
      autofocus：自动获得焦点关注
      autocomplete:默认是打开的，如果关闭了，之前登录的信息不会再提示了
      required:表示输入框必须要填入数据，不能为空
      pattern:正则表达式
    -->
    姓名: <input type="text" placeholder="请输入姓名" name="username" maxlength="10" autofocus="autofocus"
                 autocomplete="off" required="required" pattern="^[0-9]*$"/><br />
    <!-- 
      input[type="password"]：密码输入框，内容隐藏
      placeholder：提示填写密码，name 用于后端接收 
      readonly:只读（注意和disabled的区别）
      disabled:只读，输入框直接变灰了
    -->
    密码: <input type="password" placeholder="请输入密码" name="password" readonly="readonly" /><br />
    
    性别:
    <!-- 
      input[type="radio"]：单选按钮，同一组（name 相同）只能选一个
      name="gender"：保证“男/女”互斥，value 是提交给后端的值
      checked：默认选中状态（这里“男”默认选） 
    -->
    <input type="radio" name="gender" value="boy" checked="checked" />男&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="gender" value="girl" />女<br />
    
    爱好:
    <!-- 
      input[type="checkbox"]：复选框，同一组（name 相同）可多选
      name="hobby"：后端通过 hobby 接收选中的多个值（数组形式）
      checked：默认选中（“编程”默认选） 
    -->
    <input type="checkbox" name="hobby" value="ball" />篮球&nbsp;&nbsp;
    <input type="checkbox" name="hobby" value="code" checked="checked" />编程&nbsp;&nbsp;
    <input type="checkbox" name="hobby" value="music" />音乐<br />
    
    家庭地址:<br />
    <!-- 
      select + option：下拉菜单，multiple 允许按住 Ctrl 多选
      name="address"：后端通过 address 接收选中的 value
      selected：默认选中项（“江苏常州”默认选） 
    -->
    <select name="address" >
      <option value="wx">江苏无锡</option>
      <option value="cz" selected="selected">江苏常州</option>
      <option value="nj">江苏南京</option>
    </select><br />
    颜色:
    <!-- 
      input[type="color"]：颜色选择器，弹出系统颜色面板
      name="color"：后端接收选中的颜色值（如 #ff0000 ） 
    -->
    <input type="color" name="color" /><br />
    
    邮箱:
    <!-- 
      input[type="email"]：邮箱格式校验，不符合规则（如少 @ ）无法提交
      name="email"：后端接收邮箱值，自动做格式校验（浏览器原生功能） 
    -->
    <input type="email" name="email" /><br />
    
    手机号:
    <!-- 
      input[type="tel"]：电话输入框，部分浏览器会调数字键盘
      name="telphone"：后端接收手机号值 
    -->
    <input type="tel" name="telphone" />（大部分浏览器不支持使用）<br />
    
    搜索框:
    <!-- 
      input[type="search"]：搜索框，右侧可能带“清空”按钮（浏览器默认样式）
      name="query"：后端接收搜索关键词 
    -->
    <input type="search" name="query" /><br />
    
    滑动条:
    <!-- 
      input[type="range"]：滑动条，通过 min/max 设范围，value 是默认值，step 是步长
      name="range"：后端接收滑动值（如 2 ） 
    -->
    <input type="range" min="0" max="10" value="2" step="2" name="range" /><br />
    
    图片提交按钮:
    <!-- 
      input[type="image"]：用图片当提交按钮，点击触发 form 提交
      src：图片路径，提交时会传点击坐标（实际少用，一般用 <button> + <img> 替代） 
    -->
    <input type="image" src="./img/login.png" /><br />
    
    隐藏域:
    <!-- 
      input[type="hidden"]：隐藏的输入框，用户看不到，但会提交数据
      value：固定值，用于传后台需要的额外参数（如标识、token ） 
    -->
    <input type="hidden" value="隐藏起来" /><br />
    
    文件上传:
    <!-- 
      input[type="file"]：文件上传控件，可选择本地文件
      name="upload"：后端通过 upload 接收文件（需配合后端语言处理，如 PHP/Node ） 
      multiple:一次可以上传多个文件
    -->
    <input type="file" name="upload" multiple="multiple"/><br />
    
    网址输入:
    <!-- 
      input[type="url"]：网址格式校验，需带 http/https 等前缀
      name="url"：后端接收网址值，浏览器原生校验格式 
    -->
    <input type="url" name="url"  /><br />
    
    数字输入:
    <!-- 
      input[type="number"]：仅允许输入数字，带上下箭头调节
      name="num"：后端接收数值，min/max 可限制范围（示例没写，可扩展） 
    -->
    <input type="number" name="num" /><br />
    
    时间控件:<br />
    <!-- 
      input[type="date"]：日期选择器（年-月-日）
      input[type="time"]：时间选择器（时:分）
      input[type="datetime-local"]：日期+时间（年-月-日 时:分）
      input[type="week"]：周选择器（年-第几周）
      input[type="month"]：月选择器（年-月）
      这些控件方便用户选时间，值会按格式提交给后端 
    -->
    <input type="date" /><br />
    <input type="time" /><br />
    <input type="datetime-local" /><br />
    <input type="week" /><br />
    <input type="month" /><br />
    <!-- 
   textarea标签：多行文本输入框，用于输入大段文本（如评论、留言等）
   1.name属性：表单数据的键名，后端通过 content 接收该输入框的值
   2.cols属性：文本框的可见宽度（以字符为单位），默认20个字符宽
   3.rows属性：文本框的可见高度（以行数为单位），默认显示5行
   注意：textarea内部的换行、空格会被解析为文本内容（示例里有缩进，实际用需顶格写）
-->
    评价：<br />
    <textarea name="content" cols="20" rows="5"> </textarea><br/>

    <!-- 如果像下面这样写就默认有缩进 -->
    <!-- <textarea name="content" cols="20" rows="5">
    </textarea><br/> -->
    <!-- 
      input[type="submit"]：提交按钮，点击触发表单提交
      input[type="reset"]：重置按钮，点击清空表单所有输入
      input[type="button"]：普通按钮，需配合 JS 写点击逻辑（这里仅演示） 
    -->
    <input type="submit" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" />
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="普通按钮" /><br />
  </form>
    
</body>
</html>